import { PageContainer } from '@ant-design/pro-components';
import { useEffect, useState } from 'react';
import { request, useAccess, Access } from '@umijs/max';
import { Button } from 'antd';

const Index = () => {
  const [list, setList] = useState([]);
  const access = useAccess();

  useEffect(() => {
    request('/api/v1/queryUserList').then((res) => {
      setList(res.data.list);
    });
  }, []);

  return (
    <PageContainer
      ghost
      header={{
        title: '权限管理页面',
      }}
    >
      <Access accessible={access.canSeeAddButton}>
        <Button type="primary">新增</Button>
      </Access>
      <ul>
        {list.map((item: any) => (
          <li key={item.name}>
            {item.name} - {item.nickName} -{' '}
            <Access accessible={access.canSeeEditButton}>
              <Button type="primary">编辑</Button>
            </Access>
            -
            <Button danger type="primary">
              删除
            </Button>
          </li>
        ))}
      </ul>
    </PageContainer>
  );
};

export default Index;
